<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-04-26 15:04:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:46:12
-->
<template>
  <div>
    <el-dialog
      title="高级筛选"
      :visible.sync="dialog.dialogScreenVisible"
      width="61%"
      @close="onClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <div class="content">
        <div class="tiaojian">筛选条件</div>
        <div class="content-tj" v-for="(item, index) in condition" :key="index">
          <el-select
            v-model="item.fieldName"
            placeholder="请选择你要筛选的字段名"
            style="width: 330px"
            @change="fieldChange(index)"
          >
            <el-option
              v-for="(item, index) in switchShow"
              :key="index"
              :label="item.label"
              :value="`${item.stage},${item.label}`"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.condition"
            style="margin: 0 32px"
            @change="conChange(index)"
          >
            <el-option
              v-for="(item, index) in getTerm(item.fieldName)"
              :key="index"
              :label="item.label"
              :value="`${item.value},${item.label}`"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="item.value"
            placeholder="请输入筛选条件"
            style="width: 245px"
            v-if="showI(item) == 0"
            :disabled="showD(item)"
          ></el-input>
          <el-select
            v-model="item.value"
            placeholder="请选择"
            v-else-if="showI(item) == 1"
            :disabled="showD(item)"
          >
            <el-option
              v-for="(item, index) in customerData"
              :key="index"
              :label="item.name"
              :value="`${item.id},${item.name}`"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.value"
            placeholder="请选择"
            v-else-if="showI(item) == 3"
            :disabled="showD(item)"
          >
            <el-option
              v-for="(item, index) in sexData"
              :key="index"
              :label="item.dictLabel"
              :value="`${item.dictValue},${item.dictLabel}`"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="item.value"
            placeholder="请选择"
            v-else-if="showI(item) == 5"
            :disabled="showD(item)"
          >
            <el-option
              v-for="(item, index) in leaderData"
              :key="index"
              :label="item.dictLabel"
              :value="`${item.dictValue},${item.dictLabel}`"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.value"
            placeholder="请选择"
            v-else-if="showI(item) == 6"
            :disabled="showD(item)"
          >
            <el-option
              v-for="(item, index) in distriData"
              :key="index"
              :label="item.nickName"
              :value="`${item.userId},${item.nickName}`"
            >
            </el-option>
          </el-select>

          <el-date-picker
            style="width: 230px"
            v-model="item.value"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled="showD(item)"
            v-else
          >
          </el-date-picker>
          <i
            class="iconfont icon-close"
            v-if="index !== 0"
            style="margin-left: 10px"
            @click="del(index)"
          ></i>
        </div>
        <div class="add" @click="add"><strong>+</strong> 添加筛选条件</div>
        <div class="cek">
          <el-checkbox v-model="check"></el-checkbox> <span>保存为场景</span>
          <el-input
            v-model="sceneName"
            placeholder="请输入场景名"
            style="width: 245px; margin-left: 20px"
            v-if="check"
          ></el-input>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.dialogScreenVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="sceneId == ''">
          确定
        </el-button>
        <el-button type="primary" @click="editSubmit" v-else>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Bus from "@/utils/Bus";
import { addScene } from "@/api/signUp";
import { updateScene } from "@/api/currency";
import { relationCustomerList } from "@/api/CRM";
import { distriBution } from "@/api/registration";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    switchShow: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      sceneId: "",
      sceneName: "",
      check: false,
      condition: [
        {
          fieldName: "",
          condition: "",
          value: "",
        },
      ],
      distriData: [],
      sexData: [],
      customerData: [],
      leaderData: [],
    };
  },
  mounted() {
    Bus.$on("querySenceList", (target) => {
      this.condition = target.sceneList;
      if (target.name !== "") {
        this.check = true;
        this.sceneName = target.name;
        this.sceneId = target.sceneId;
      }
    });
  },
  created() {
    this.getDicts("sys_user_sex").then((res) => {
      this.sexData = res.data;
    });
    this.getDicts("leader").then((res) => {
      this.leaderData = res.data;
    });
    this.getCusList();
    this.getDistri();
  },
  methods: {
    // 获取客户列表
    getCusList() {
      relationCustomerList().then((res) => {
        this.customerData = res.rows;
      });
    },
    // 获取负责人
    getDistri() {
      distriBution().then((res) => {
        this.distriData = res.data;
      });
    },
    // 第二个下拉框选择变化
    conChange(index) {
      for (var i = 0; i < this.condition.length; i++) {
        this.condition[index].value = "";
      }
    },
    // 第一个下拉框选择变化
    fieldChange(index) {
      for (var i = 0; i < this.condition.length; i++) {
        this.condition[index].condition = "";
        this.condition[index].value = "";
      }
    },
    // 获取数组
    getTerm(val) {
      let term = [];
      if (val == "name,姓名") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
        ];
      } else if (val == "crmName,客户名称") {
        term = [
          {
            label: "等于",
            value: "9",
          },
          {
            label: "不等于",
            value: "10",
          },
        ];
      } else if (val == "phone,手机号码") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
        ];
      } else if (val == "sex,性别") {
        term = [
          {
            label: "等于",
            value: "9",
          },
          {
            label: "不等于",
            value: "10",
          },
        ];
      } else if (val == "post,职务") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
          {
            label: "为空",
            value: "3",
          },
          {
            label: "不为空",
            value: "4",
          },
        ];
      } else if (val == "wechat,微信") {
        term = [
          {
            label: "等于",
            value: "9",
          },
          {
            label: "不等于",
            value: "10",
          },
        ];
      } else if (val == "leader,是否关键决策人") {
        term = [
          {
            label: "等于",
            value: "9",
          },
          {
            label: "不等于",
            value: "10",
          },
        ];
      } else if (val == "education,下次联系时间") {
        term = [
          {
            label: "时间段",
            value: "13",
          },
        ];
      } else if (val == "remark,备注") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
          {
            label: "为空",
            value: "3",
          },
          {
            label: "不为空",
            value: "4",
          },
        ];
      } else if (val == "address,地址") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
          {
            label: "为空",
            value: "3",
          },
          {
            label: "不为空",
            value: "4",
          },
        ];
      } else if (val == "updataTime,更新时间") {
        term = [
          {
            label: "时间段",
            value: "13",
          },
        ];
      } else if (val == "directorName,负责人") {
        term = [
          {
            label: "等于",
            value: "9",
          },
          {
            label: "不等于",
            value: "10",
          },
        ];
      } else if (val == "createBy,创建人") {
        term = [
          {
            label: "包含",
            value: "1",
          },
          {
            label: "不包含",
            value: "2",
          },
        ];
      } else if (val == "createTime,创建时间") {
        term = [
          {
            label: "时间段",
            value: "13",
          },
        ];
      }
      return term;
    },
    // 修改高级筛选
    async editSubmit() {
      var fd = new FormData();
      fd.append("dataList", JSON.stringify(this.condition));
      fd.append("name", this.sceneName);
      fd.append("type", 13);
      let res = await updateScene(fd);
      this.$message.success(res.msg);
      this.$parent.getScene();
      this.$parent.$refs.dragTable.getSenceList();
      this.dialog.dialogScreenVisible = false;
    },
    showI(item) {
      let flag = 0;
      if (
        item.condition == "13,时间段" ||
        item.fieldName == "education,下次联系时间" ||
        item.fieldName === "updataTime,更新时间" ||
        item.fieldName === "createTime,创建时间"
      ) {
        flag = 2;
      } else if (item.fieldName == "crmName,客户名称") {
        flag = 1;
      } else if (item.fieldName == "sex,性别") {
        flag = 3;
      } else if (item.fieldName == "leader,是否关键决策人") {
        flag = 5;
      } else if (item.fieldName == "directorName,负责人") {
        flag = 6;
      } else {
        flag = 0;
      }
      return flag;
    },
    showD(item) {
      let disable = false;
      if (item.condition == "3,为空" || item.condition == "4,不为空") {
        disable = true;
      }
      return disable;
    },
    del(i) {
      this.condition.splice(i, 1);
    },
    onClose() {
      this.condition = [
        {
          fieldName: "",
          condition: "",
          value: "",
        },
      ];
      this.sceneName = "";
      this.check = false;
      this.dialog.screenEcejt = false;
    },
    add() {
      this.condition.push({
        fieldName: "",
        condition: "",
        value: "",
      });
    },
    async onSubmit() {
      for (var i = 0; i < this.condition.length; i++) {
        for (var key in this.condition[i]) {
          if (
            this.condition[i].condition == "3,为空" ||
            this.condition[i].condition == "4,不为空"
          ) {
            this.condition[i].value = " ";
          }
          if (this.condition[i][key] == "") {
            return this.$message.error("请填写全部选项");
          }
        }
      }
      var fd = new FormData();
      fd.append("dataList", JSON.stringify(this.condition));
      fd.append("name", this.sceneName);
      fd.append("type", 13);
      fd.append("sceneId", this.sceneId);
      let res = await addScene(fd);
      if (this.sceneName == "") {
        this.$parent.getList(res.sceneId);
        this.$emit("sceneArr", res);
        return (this.dialog.dialogScreenVisible = false);
      } else {
        this.$message.success(res.msg);
        this.$parent.getScene();
        this.dialog.dialogScreenVisible = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tiaojian {
  margin-top: 31px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1f2e4d;
  line-height: 14px;
}
.content-tj {
  margin-top: 12px;
}
.add {
  margin-top: 23px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1267fa;
  line-height: 14px;
  strong {
    font-size: 16px;
    font-weight: 700;
  }
}
.cek {
  margin-top: 14px;
  margin-bottom: 28px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
}
</style>